import { t } from 'i18next'
import { useEffect, useState } from 'react'
import { Select } from '@kedacom/react-next'
import { StyleData, vmpStyleData } from '../interface'
import { StyledChoose } from './style'
import StyleModal from './StyleModal'

interface StyleChooseProps {
	styleData: StyleData
	isShowSingle?: boolean
	disabled?: boolean
	onSelect: (id: number) => void
}
/**下拉列表*/
const selectData: Array<{ value: number; label: string }> = []
vmpStyleData.forEach((item) => {
	let count = item.listItemCount
	if (selectData.findIndex((i) => i.value === count) !== -1) return
	selectData.push({
		value: count,
		label: count + t('画面'),
	})
})
export default function StyleChoose(props: StyleChooseProps) {
	const { styleData, onSelect, isShowSingle, disabled } = props
	const [open, setOpen] = useState<boolean>(false)
	const [value, setValue] = useState(styleData.listItemCount) /**下拉选中的 3画面  4画面*/
	const [valueSource, setValueSource] = useState(vmpStyleData) /**小画面展示的数据源*/
	const [isSelectOption, setIsSelectOption] = useState(false)
	useEffect(() => {
		let _valueSource = vmpStyleData.filter((item) => {
			return item.listItemCount === value /**value值变化 删选出该画面风格画面数据源头 */
		})
		setValueSource(_valueSource) /**设置小画面的数据源 */
		if (isSelectOption) {
			onSelect(_valueSource[0].id) /**默认选中第一个*/
		}
		setIsSelectOption(false)
	}, [value])
	useEffect(() => {
		setValue(styleData.listItemCount) /**根据风格获取风格对应的value值*/
	}, [styleData])
	/**展示风格选择框*/
	const handleShowStyleSelectModal = () => {
		if (disabled) {
			return false
		}
		setOpen(true)
	}
	return (
		<StyledChoose className="style-choose" disabled={disabled}>
			{isShowSingle && (
				<div
					className={`single-box style-box select ${styleData.className}`}
					data-key={styleData.dataKey}
				></div>
			)}
			{!isShowSingle && (
				<>
					<div className="slider-bar">
						<div className="slider-bar-l">
							<Select
								width={110}
								className="style-select"
								value={value}
								options={selectData}
								onClick={(e, val, opt) => {
									setValue(val)
									setIsSelectOption(true)
								}}
								disabled={disabled}
							></Select>
							<div className="slider-view">
								<ul>
									{valueSource.map((item) => (
										<li
											key={item.id}
											className={`style-box ${item?.className} ${
												item?.id === styleData.id ? 'select' : ''
											}`}
											data-key={item.dataKey}
											onClick={() => {
												!disabled && onSelect(item.id)
											}}
										></li>
									))}
								</ul>
							</div>
							<div
								className={`${disabled ? 'disabled-btn-more' : 'btn-more'}`}
								onClick={handleShowStyleSelectModal}
							>
								...
							</div>
						</div>
						{false && (
							<div className="slider-bar-r">
								<div className="btn_filter_btn">{t('自动填充空闲画面')}</div>
							</div>
						)}
					</div>
					<StyleModal open={open} style={styleData} setOpen={setOpen} onSelect={onSelect} />
				</>
			)}
		</StyledChoose>
	)
}
